<template>
  <div class="set-container">
    <!-- 头部 -->
    <div class="set-header">
      <van-nav-bar :fixed="true" title="设置" @click-left="onClickLeftHeader" >
        <van-icon name="arrow-left" slot="left" size="20" color="#000000" />
      </van-nav-bar>
    </div>

    <!-- 设置导航 -->
    <div class="set-nav">
      <van-nav-bar left-text="账号与安全"  >
        <van-icon name="arrow" slot="right" size="15" color="#000000" />
      </van-nav-bar>
      <van-nav-bar left-text="新消息通知"  >
        <van-icon name="arrow" slot="right" size="15" color="#000000" />
      </van-nav-bar>
      <van-nav-bar left-text="隐私设置"  >
        <van-icon name="arrow" slot="right" size="15" color="#000000" />
      </van-nav-bar>
      <van-nav-bar left-text="护眼模式"  >
        <van-icon name="arrow" slot="right" size="15" color="#000000" />
      </van-nav-bar>
      <van-nav-bar left-text="视频自动播放"  >
        <van-icon name="arrow" slot="right" size="15" color="#000000" />
      </van-nav-bar>
      <van-nav-bar left-text="动图自动播放"  >
        <van-icon name="arrow" slot="right" size="15" color="#000000" />
      </van-nav-bar>
      <van-nav-bar left-text="清除缓存"  >
        <van-icon name="arrow" slot="right" size="15" color="#000000" />
      </van-nav-bar>
      <van-nav-bar left-text="建议与反馈"  >
        <van-icon name="arrow" slot="right" size="15" color="#000000" />
      </van-nav-bar>
      <van-nav-bar left-text="检查更新"  >
        <van-icon name="arrow" slot="right" size="15" color="#000000" />
      </van-nav-bar>
      <van-nav-bar left-text="关于"  >
        <van-icon name="arrow" slot="right" size="15" color="#000000" />
      </van-nav-bar>
      <van-nav-bar left-text="用户协议"  >
        <van-icon name="arrow" slot="right" size="15" color="#000000" />
      </van-nav-bar>
      <van-button type="default" @click="out" block>退出登录</van-button>
    </div>
  </div>
</template>

<script>
import { Notify } from 'vant';

export default {
  name: "Set",
  data(){
    return{

    }
  },
  methods:{
    onClickLeftHeader(){
      this.$router.go(-1)
    },
    out(){
      this.$router.push('/login')
      localStorage.removeItem('token')
      Notify({type: 'success', message: '退出成功!'});
    }
  }

}
</script>

<style lang="less" scoped>
.set-container{
  padding: 46px 0 0 0;
  /* 头部 */
  .set-header{
    .van-nav-bar{
      //background: -webkit-linear-gradient(left,#151078, #319572,#2D9EBD);
      background: -webkit-linear-gradient(left, #FAEFF7,#EAE9FB,#E5F3FC);
    }
    /deep/ .van-nav-bar__title{
      font-weight:bold;
    }
  }

  /*设置导航*/
  .set-nav{
    /deep/ .van-nav-bar__text {
      color: black;
      //font-weight:bold;
      font-size:  0.7rem;
    }
  }


}
</style>